<template>
  <div>
    <search-movie></search-movie>
    <movie-list :movies="inTheaters" title="正在热映"></movie-list>
    <movie-list :movies="comingSoons" title="即将上映"></movie-list>
  </div>
</template>

<script>
import { getTheaters, getComingSoon } from '../../api/movie'
import SearchMovie from './index-search/index'
import MovieList from './movie-list/index'
export default {
  data () {
    return {
      inTheaters: [],
      comingSoons: []
    }
  },
  components: {
    SearchMovie,
    MovieList
  },
  created () {
    this.getTheaters()
    this.getComingSoon()
  },
  methods: {
    getTheaters () {
      let params = {city: '杭州', count: 10}
      getTheaters(params).then(res => {
        this.inTheaters = res.subjects.map(item => {
          return {
            movieImg: item.images.large,
            movieName: item.title,
            rate: item.rating.average,
            id: item.id
          }
        })
      })
    },
    getComingSoon () {
      let params = {count: 10}
      getComingSoon(params).then(res => {
        this.comingSoons = res.subjects.map(item => {
          return {
            movieImg: item.images.large,
            movieName: item.title,
            rate: item.rating.average,
            id: item.id
          }
        })
      })
    }
  }
}
</script>

